<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" href="css/newProductIB.css">
    <title>新品情报局-游侠客</title>
</head>

<body>
    <div class="new-product1">
        <img src="https://m.youxiake.com/20250905172021/img/title.4417cf86.png" alt="">
    </div>
    <div class="new-product2">
        <img src="https://m.youxiake.com/20250905172021/img/title2.53ea1d62.png" alt="">
    </div>
    <div class="navs">
        <div class="new-navs">
            <div class="new-nav new-nav-active">
                <i class="i1"></i>
                <p>国内</p>
            </div>
            <div class="new-nav">
                <i class="i2"></i>
                <p>出境</p>
            </div>
            <div class="new-nav">
                <i class="i3"></i>
                <p>周边</p>
            </div>
        </div>
        <ul class="nav__list">
            <li class="nav-active">全部</li>
            <li class="">户外</li>
            <li class="">亲子</li>
            <li class="">摄影</li>
        </ul>
    </div>
    <ul class="lines__list">
    </ul>
    <div class="new-product2">
        <img src="https://m.youxiake.com/20250905172021/img/title3.ff7660b8.png" alt="">
    </div>
    <div class="navs">
        <div class="new-navs">
            <div class="new-nav new-nav-active">
                <i class="i1"></i>
                <p>国内</p>
            </div>
            <div class="new-nav">
                <i class="i2"></i>
                <p>出境</p>
            </div>
            <div class="new-nav">
                <i class="i3"></i>
                <p>周边</p>
            </div>
        </div>
        <ul class="nav__list">
            <li class="nav-active">全部</li>
            <li class="">户外</li>
            <li class="">亲子</li>
            <li class="">摄影</li>
        </ul>
    </div>
    <ul class="FoundMore__list">
    </ul>
</body>
<script src="js/reset.js"></script>
<script>
    fetch('https://m.youxiake.com/api/m/v2/channel/fresh-launch?siteCode=0&page=1&hotClassThemeId=&moreClassThemeId=&hotClassRegionId=&moreClassRegionId=').then(res => res.json()).then(res1 => {
        console.log(res1);
        const linesList = document.querySelector('.lines__list');
        const FoundMoreList = document.querySelector('.FoundMore__list');
        res1.data.hotProductList.forEach(item => {
            linesList.innerHTML += `
            <li>
                <div class="left">
                    <img src="${item.productAvatar}"
                        alt=""></img>
                    <p>${item.departure}</p>
                </div>
                <div class="right">
                    <div class="name"><span>${item.operationLabels[0]}</span>${item.productName}</div>
                    <div class="types"><span class="divider">${item.classTypeName}</span><span class="divider">${item.classThemeName}</span>
                        <div>${item.daysLabel}</div>
                    </div>
                    <div class="tag1">
                        <div class="tag_label1"><span class="text1">${item.statusLabel}</span></div>
                        <div class="tag_label2"><span class="text2">${item.startDate}</span></div>
                    </div>
                    <div class="price_box">
                        <div class="enroll__num">${item.viewCountLabel}</div>
                        <div class="price">
                            <div class="amount"><span>￥</span><span class="price__num">${item.price}</span>起 </div>
                        </div>
                    </div>
                </div>
            </li>
            `
        })
        res1.data.moreProductList.list.forEach(item => {
            FoundMoreList.innerHTML += `
            <li class="item_box">
            <div class="item_img">
                <img src="${item.productAvatar}"
                    alt=""></img>
                <i class="departure">${item.departure}</i>
                <div class="label_box">
                    <div class="label"><span>${item.operationLabels[0]}</span></div>
                    <div class="date date2"><span>${item.startDate}</span><span>${item.statusLabel}</span><i></i></div>
                </div>
            </div>
            <div class="item_info">
                <span class="subtitle text-ellipsis">${item.classTypeName}·${item.daysLabel} </span>
                <span class="title">${item.productName}</span>
                <div class="label_list">
                    <span>${item.liangdian[0]}</span>
                    <span>${item.liangdian[1]}</span>
                </div>
                <div class="num_box">
                    <div class="price_box">
                        <span class="unit">¥</span>
                        <span class="price">${item.price}</span>
                        <span class="text">起</span>
                    </div>
                    <span class="text">${item.viewCountLabel}</span>
                </div>
            </div>
        </li>
            `
        })
    }).catch(err => {
        console.log(err);
    })
</script>

</html>